<template>
  <div class="footer">
    <div class="group">
      <div class="share">
        <a @click="qr1"  class="wechat" href="javascript:;">
          <div class="qrcode" ref="qr1">
            <img class="qr"  src="~img/dingyuehao.jpg" alt="">
          </div>
        </a>
        <a @click="qr2"  class="MiniProgram" href="javascript:;">
          <div class="qrcode" ref="qr2">
            <img class="qr"  src="~img/dingyuehao.jpg" alt="">
          </div>
        </a>
      </div>
      <span class="copyRight">
					© Copyright. Monlot All Rights Reserved.
				</span>
    </div>
  </div>
</template>

<script>
export default {
  beforeRouteEnter(to, from, next) {
    return next(vm => {});
  },
  name: "footerbox",
  data() {
    return {

    };
  },
  methods:{
    qr1(){
      this.$refs.qr1.style.display="block"
     console.log(this.$refs.qr2.style.display="none") 
    },
    qr2(){
      this.$refs.qr2.style.display="block"
     console.log(this.$refs.qr1.style.display="none") 
    }
  }
};
</script>
<style scoped lang='stylus'>
.footer {
  height: 80px;
  background: #0E0D0C;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.footer .group {
  width: 1200px;
  margin: 0 auto;
  position: relative;
}

.footer .group .share {
  position: absolute;
  top: 24px;
}

.footer .group .share a {
  width: 34px;
  height: 34px;
  display: inline-block;
  margin-right: 23px;
  position: relative;
}

.footer .group .share .wechat {
  background: url('http://static.monlot.com/images/footer_btn_wechat_normal.png') 0 0 no-repeat;
  background-size: 34px 34px;
}

.footer .group .share .wechat:hover {
  background: url('http://static.monlot.com/images/footer_btn_wechat_focused.png') 0 0 no-repeat;
  background-size: 34px 34px;
}

.footer .group .share .MiniProgram {
  background: url('~@/assets/image/MiniProgram_normal.png') 0 0 no-repeat;
  background-size: 34px 34px;
}

.footer .group .share .MiniProgram:hover {
  background: url('~img/MiniProgram_focused.png') 0 0 no-repeat;
  background-size: 34px 34px;
}
.qrcode
  width:100px;
  height:100px;
  position:absolute;
  bottom:70px;
  margin-left:-33px;
  box-sizing:border-box;
  display none
.copyRight
  position: absolute;
  right: 0;
  top: 34px;
  font-size: 14px;
  color: #5F5A4F;
.qr
  width:100%;height:100%;display:block;
</style>